<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/index.css}">
   
    <!-- 引入 layui.js -->
   <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	    
	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
	  
</script>

   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 
 
 
   
 
 

    <div class="container mt-4" >
    
     <!-- 公告 -->
       <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left: 30px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
               归档    <i class="icon angle double right"> </i>
            <span> 小站日志 </span> 
          
           </p>
         </div>
       </div>
         
    
      <div class="row">
      <div class="col-sm-12" style="margin-top: 20px">
      
      
   
   
    <div class="ui segments top layui-anim layui-anim-up">
           
              <div class="ui secondary segment">
               <i class="layui-icon layui-icon-edit"></i> 小站日志
              </div>
           
          <div class="ui segment fonts">    
             <ul class="layui-timeline" id="log">
             
                 <li th:each="log,logStat:${loglist}" class="layui-timeline-item">
                     <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                     <div class="layui-timeline-content layui-text">
                       <h3 th:text="${log.getDate()}" class="layui-timeline-title">日期</h3>
                          <p  th:text="${log.text}">
                    无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                          </p>
                      </div>
                </li>
                
            </ul>
        </div>
        
          <div  class="ui segment fonts">
            <div class="ui two column grid center"> 
                   <button onclick="huoqu()" style="margin: 0 auto;width: 100px" class="btn btn-outline-success my-2 my-sm-0">   加载更多 </button>        
            </div>
          </div>
      

    </div>  
      
   </div>
    </div>
    
    
      
    

</body>
<script type="text/javascript">
   var page=1;
    //获取日志
    function huoqu(){
       page = page+1;
       $.get(
		"/blog/logmore?page="+page,
		function(data){
		if(Object.keys(data).length>0){
           for(var i in data){
           //追加元素
             $("#log").append("<li  class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i> <div class='layui-timeline-content layui-text'><h3  class='layui-timeline-title'>"+data[i].date+"</h3><p>"+data[i].text+"</p> </div></li>");      
           }
       }else{
           $("#log").append("<li  class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i> <div class='layui-timeline-content layui-text'><h3  class='layui-timeline-title'>到底了~</h3></div></li>");
       }
       
		  }
		  
    )}
</script>
</html>